<template>
 <div id="share">
   <!-- 封面 -->
   <div class="cover">
	   <el-carousel :interval="5000" arrow="always" height="350px">
	       <el-carousel-item v-for="item in carouseData" :key="item">
	        <img :src="item.url" alt=""  style="width: 100%"/>
	       </el-carousel-item>
	     </el-carousel>
   </div>
   <!-- 分享 -->
    <div class="share"
    >
      <div class="center">
        <div class="title">
          <div class="als">Location Scenic Area</div>
          <div class="vr"></div>
          <div class="ss">地点景区</div>
        </div>
        <div class="navLists"
          v-infinite-scroll="lazyLoad"  
          infinite-scroll-delay=1000 
        >
          <div class="list" 
            v-for="item in shareData"
            :key="item._id" 
          >
           <!-- <div class="left">
              <div class="year">{{conversionYear(item.date)}}</div>
              <div class="month">{{conversionMonth(item.date)}}</div>
            </div> -->
          <!--  <div class="vr"></div> -->
            <div class="right">
              <div class="title">
                <router-link :to="/article/+item._id+'?type=share'" target="_blank">
                  {{item.title}}
                </router-link>
              </div>
              <div class="des">
                {{item.des}}
              </div>
              <div class="imgs">
                <el-image
                  style="width: 290px;height: 170px;"
                  v-for="chirdItem in item.cover"
                  :ket="chirdItem._id"
                  :src="baseURL+chirdItem"   
                  lazy   
                >
                <template #error>
                  <div class="image-slot">
                    <i class="iconfont icon-bianzu"></i>
                图片加载失败
                  </div>
                </template>
                <template #placeholder>
                  <div class="error">
                    <el-icon class="is-loading">
                      <i class="iconfont icon-zhengzaijiazai" style="font-size='20px'"></i>
                </el-icon>
                图片正在加载
                  </div>
                </template>
                </el-image>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-alert v-if="isloading" center type="success">
        <template #title>
          <el-icon class="el-icon-loading">
          </el-icon>
          正在加载更多内容
        </template>
      </el-alert>
      <el-alert v-else center type="success">
        <template #title>
          没有更多内容啦
        </template>
      </el-alert>
    </div>
 </div>
</template>
 
<script>
export default {
  name: 'Share',
  data(){
    return{
      // 每次加载时的初始值
      skip:0,
      // 每次加载的数量
      limit:3,
      // 分享文章列表
      shareData:[],
      // 是否显示正在加载
      isloading:true,
	  carouseData: [
	          { url: require("../assets/img/lubo1.webp") },
	          { url: require("../assets/img/lubo2.webp") },
	          { url: require("../assets/img/lubo3.webp") },
	          { url: require("../assets/img/lubo4.webp") },
	          { url: require("../assets/img/lubo5.webp") }
	        ]
    }
  },
  methods:{
    // 懒加载获取分享文章
    async lazyLoad(){
      let {data} = await this.$axios.get("/client/share/getAll",{
        params:{
          skip:this.skip,
          limit:this.limit
        }
      })
      this.skip += this.limit
      if(data.code)  {
        this.$message.warning(data.mes)
        this.isloading = false
        return
      }
      this.shareData.push(...data.data)
    },
    // 时间转化 年
    conversionYear(data){
      let time = new Date(data)
      let year = time.getFullYear()
      return year
    },
    // 时间转化 月-日
    conversionMonth(data){
      let time = new Date(data)
      let month = time.getMonth()+1<10?"0"+(time.getMonth()+1):time.getMonth()+1
      let day = time.getDate()<10?"0"+time.getDate():time.getDate()
      return `${month}-${day}`
    }

  },
  mounted(){
    this.lazyLoad() 
  }
}
</script>

<style scoped lang='less'>
#share{
  // 封面图
  .cover{
    width: 1000px;
    height: 350px;
    margin: 0 auto;
    /* background: url("../assets/img/shareBg.jpg") no-repeat; */
  }
  // 分享
  .share{
    width: 100%;
    background: url("../assets/img/home02.jpg");
    padding-top: 50px;
    .center{
      width: 1200px;
      margin: 0 auto;
      .title{
        width: 266px;
        height: 80px;
        margin: auto;
        text-align: center;
        .als{
          color: #444444;
          font-size: 26px;
        }
        .vr{
          width: 30px;
          height: 2px;
          background-color: #FFC001;
          margin: 22px auto;
        }
        .ss{
          font-size: 20px;
          color: #444444;
        }
      } 
      .navLists{
        width: 100%;
        margin-top: 70px;
        padding-bottom: 40px;
        .list{
          width: 100%;
          height: 320px;
          display: flex;
          justify-content: space-between;
          margin-bottom: 70px;
          user-select: none;
          &:last-child{
            margin-bottom: 0px;
          }
          .left{
            width: 92px;
            height: 58px;
            text-align: left;
            margin-top: 20px;
            .year{
              font-size: 24px;
              color: #444444;
            }
            .month{
              font-size: 14px;
              color: #777777;
              margin-top: 10px;
            }
          }
          /* .vr{
            width: 1.5px;
            height: 320px;
            background-color: rgb(235, 233, 233);
            margin: 0 70px;
          } */
          .right{
            width: 930px;
            height: 280px;
            padding: 20px 0;
            text-align: left;
			margin: 0 auto;
            .title{
              width: 100%;
              text-align: left;
              animation: fadeIn;
              animation-duration: 1s;
              a{
                text-decoration: none;
                color:#444444;
                font-size: 16px;
              }
            }
            .des{
              width: 100%;
              height: 50px;
              line-height: 25px;
              margin-top: -40px;
              color: #777777;
              font-size: 14px;
              white-space: normal;
              text-overflow: ellipsis;
              overflow: hidden;
              display: -webkit-box; 
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              // animate__zoomIn
              animation: bounceIn;
              animation-duration: 1s;
            }
            .imgs{
              width: 100%;
              height: 170px;
              display: flex;
              justify-content: space-between;
              margin-top: 25px;
              animation: rubberBand;
              animation-duration: 1.5s;
              .el-image{
                display: flex;
                justify-content: center;
                .image-slot,.error{
                  display: flex;
                  color: #999;
                  font-size: 17px;
                  flex-direction: column;
                  justify-content: space-evenly;
                  align-items: center;
                  i{
                    font-size: 40px;
                  }
                }
              }
              img{
                width: 290px;
                height: 170px;
                border-radius: 8px;
              }
            }
          }
        }
      }
    }
  }
}
</style>